<template>
    <view>
        <view class="mine_info">
            <view class="flex-s-b" style="padding: 0 78rpx 0 68rpx">
                <view class="">
                    <view class="flex-c" style="padding: 54rpx 0 41rpx 0">
                        <text class="u-m-r-16" style="font-size: 38rpx; color: #9e9e9e">剩余次数</text>
                        <image :src="$cdn_img('/static/mine/a_mine_look.png')" style="width: 40rpx; height: 40rpx" mode=""></image>
                    </view>
                    <view style="color: #3d3d3d" class="flex-c-c">
                        <text class="u-font-38" style="margin-top: 14rpx">¥</text>
                        <text class="" style="font-size: 64rpx">{{ form_data.balance || 0 }}</text>
                    </view>
                </view>
                <view style="" class="u-m-t-70">
                    <image :src="$cdn_img('/static/mine/a_bg_money.png')" style="width: 120rpx; height: 120rpx" mode=""></image>
                </view>
            </view>

            <view class="flex-c-c u-border-top view-1">
                <view
                    class="flex-c-c u-border-right"
                    style="width: 50%; height: 60rpx"
                    @click="
                        $u.route('/pages/mine/mingxi', {
                            id: form_data.id,
                            type: 1
                        })
                    "
                >
                    <image :src="$cdn_img('/static/mine/a_mine_log.png')" style="width: 48rpx; height: 48rpx; margin-right: 8rpx" mode=""></image>
                    <text>充值记录</text>
                </view>
                <view
                    class="flex-c-c"
                    style="width: 50%"
                    @click="
                        $u.route('/pages/mine/mingxi', {
                            id: form_data.id,
                            type: 0
                        })
                    "
                >
                    <image :src="$cdn_img('/static/mine/a_mine_cz.png')" style="width: 48rpx; height: 48rpx; margin-right: 8rpx" mode=""></image>
                    <text>签到记录</text>
                </view>
            </view>
        </view>
        <view class="payment bg-white">
            <view class="input flex-c">
            <!--    <text style="font-size: 40rpx; color: #3d3d3d">￥</text>
                <input placeholder="请输入卡数" type="number" v-model="amount" /> -->
				<view class="bottom-border flex-c-s w-100">
				    <view style="font-weight: bold; color: red;">冲卡次数</view>
				    <u-number-box v-model="amount" step="1"></u-number-box>
				</view>
            </view>
        </view>
        <button size="lg" class="btn white br60" style="color: white" @click="tixianBtn">立即充值</button>
    </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const form_data = reactive({});
onLoad((options) => {
    form_data.id = options.id;
    let getStore = uni.getStorageSync('studentList');
    let findObj = getStore.find((item) => item.id == form_data.id);
    for (let key in findObj) {
        form_data[key] = findObj[key];
    }
});

const amount = ref(10);
const tixianBtn = () => {
    if (Number(amount.value) && amount.value > 0) {
        uni.showModal({
            title:  form_data.name ,
            content: '本次充值为:' + amount.value + '次',
            success() {
                uni.$store('data').BalanceChange({ id: form_data.id, money: amount.value, ctime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM') }, 1);
                uni.navigateBack();
            }
        });
    } else {
        return uni.$u.toast('金额不对劲');
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: white;
}

.mine_info {
    width: 702rpx;
    height: 350rpx;
    background-size: 100% 100%;
    margin: 20rpx auto 0;
    position: relative;
    border-radius: 26rpx;

    box-shadow: 0 0px 13px 4px rgba(235, 67, 73, 0.1);
    backdrop-filter: blur(10rpx);

    .view-1 {
        position: absolute;
        bottom: 0;
        width: 660rpx;
        left: 20rpx;
        height: 86rpx;
        font-size: 32rpx;
        color: #3d3d3d;
    }

    .view-2 {
        width: 702rpx;
        height: 102rpx;
        background-color: white;
        border-radius: 16rpx;
        margin: 0 auto 30rpx;
        padding: 0 44rpx 0 42rpx;
    }
}

.payment {
    text-align: center;
    border-radius: 20rpx;
    overflow: hidden;
    padding-bottom: 74rpx;

    .a-tips {
        font-size: 28rpx;
        color: #9e9e9e;
        text-align: left;
        padding-left: 65rpx;
        position: relative;
        margin-bottom: 20rpx;

        &:before {
            content: '';
            position: absolute;
            width: 12rpx;
            height: 12rpx;
            background-color: #eb4349;
            left: 34rpx;
            border-radius: 50rpx;
            top: 12rpx;
        }
    }

    .nav {
        margin: 20rpx 95rpx 80rpx;

        .item {
            flex: 1;

            .line {
                width: 110rpx;
                height: 2px;
            }
        }
    }

    .line {
        width: 110rpx;
        height: 2px;
    }

    .input {
        width: 668rpx;
        height: 100rpx;
        border-radius: 16rpx;
        margin: 35rpx auto 35rpx;
        background-color: #f9f9f9;
        padding-left: 44rpx;

        input {
            height: 94rpx;
            text-align: left;
            font-size: 32rpx;
            margin-left: 10rpx;
        }
    }

    .tip {
        margin: 25rpx 66rpx;
    }
}

.btn {
    background: $bg_color;
    margin: 70rpx 0 30rpx;
    width: 660rpx;
    margin: 0 auto;
}
</style>
